<template>
  <div class="login-container">
    <img
      src="../assets/img1.jpg"
      style="position: absolute; width: 100%; height: 100%"
      alt=""
    />
    <div class="loginbox">
      <!-- background #fff -->
      <div class="loginboxbcg"></div>
      <!-- title -->
      <div class="title">管理系统</div>
      <!-- username -->
      <div class="username">
        <div style="font-size: 18px; margin-right: 15px">用户名 :</div>
        <a-input
          v-model:value="username"
          placeholder="请输入用户名"
          style="width: 70%; height: 50%; font-size: 18px"
        />
      </div>
      <!-- psd -->
      <div class="psd">
        <div style="font-size: 18px; margin-right: 15px">
          &nbsp;&nbsp;&nbsp;密码 :
        </div>
        <a-input-password
          v-model:value="psd"
          placeholder="请输入密码"
          style="width: 70%; height: 50%; font-size: 18px"
        />
      </div>
      <!-- login -->
      <div class="loginbtn">
        <a-button
          @click="login"
          type="primary"
          style="height: 60%; width: 60%; border-radius: 5px; margin-left: 35px"
        >
          登录
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { toRefs, reactive } from "vue";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
export default {
  name: "Home",
  components: {},
  setup() {
    console.log(process.env.VUE_APP_BASE_API);
    const data = reactive({
      username: "",
      psd: "",
    });


    return {
      ...toRefs(data),
    };
  },
  methods: {
    login() {
      console.log(this.username);
      if (this.username.length > 0) {
        if (this.psd.length > 0) {
          this.$store
            .dispatch("login/login", {
              admin: this.username,
              pws: this.psd,
            })
            .then((res) => {
              console.log(res);
             message.success(res.message, 5);
            })
            .catch((ERROR) => {
              message.error(ERROR, 5);
            });
        } else {
          message.error("请输入正确的密码", 5);
        }
      } else {
        message.error("请输入正确的用户名", 5);
      }
    },
  },
};
</script>
<style scoped>
.login-container {
  width: 100%;
  min-width: 940px;
  min-height: 900px;
  height: 100%;
  /* background: red; */
  position: relative;
}
.loginbox {
  height: 350px;
  width: 450px;
  /* background: #fff; */
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}
.loginboxbcg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.7;
  z-index: -1;
}
.title {
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.username,
.psd {
  display: flex;
  align-items: center;
  justify-content: center;
}
.username {
  height: 30%;
}
.psd {
  height: 30%;
}
.loginbtn {
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .ant-btn{
  width: 60%;
  height: 70% !important;
} */
</style>
